<template>
	<view class="">
		<!-- 头部内容 -->
		<u-sticky>
			<view class="dingbu">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexbetween">
						<view class="sanshis">
							<view class="xiaohei sanshier fonweight">速鉴拍卖</view>
						</view>
						<view class="sanshis"></view>
						<view class="sanshis"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 广告 -->
		<view class="margin_top1">
			<view class="mainpadding flexleft" style="background-color: #FFFAEF;"
				@click="jumpurl('/pages_homepage/gonggao')">
				<image class="margin_right2" style="width: 75rpx;height: 32rpx;" src="../static/image/system/kx.png"
					mode=""></image>
				<view class="line margin_right2"></view>
				<swiper class="" style="height: 40rpx;width: 100%;" circular autoplay vertical>
					<swiper-item v-for="item in text1" :key="item.id">
						<view class="yhxk xiaohei">{{item.name}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<image @click="renzheng"  v-if="is_login && userInfo.smrz_status==1" class="" style="width: 100%;height: 140rpx;"
			src="../static/image/system/bg.png" mode="">
		</image>
		<!-- 拍卖内容 -->
		<view class="mainpadding">
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === item.index}" @click="checked(item.index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="flexcolumn" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				<view class="xiaohui ershil margin_top5">暂无数据</view>
			</view>
			<view class="flexbetween flex_wrap">
				<!-- goods_status：1=即将开始  2=进行中 3=已结束 -->

				<view class="dqwushi margin_top" v-for="item in list.data" :key="item.id" @click="tzspxq(item.id)">
					<view class="dingwei">
						<!-- 倒计时 -->
						<view class="djbox flexleft" v-if="item.goods_status==1 || item.goods_status==2">
							<view class="margin_right0">倒计时</view>
							<view class="margin_right0" v-if="item.goods_status==1">
								<u-count-down :time="item.start_time*1000 - Number(new Date())"
									format="HH:mm:ss"></u-count-down>
							</view>
							<view class="margin_right0" v-if="item.goods_status==2">
								<u-count-down :time="item.end_time*1000 - Number(new Date())"
									format="HH:mm:ss"></u-count-down>
							</view>
						</view>
						<view class="djbox2" v-if="item.goods_status==3">拍卖已结束</view>
						<image style="width: 100%;height: 335rpx;border-radius: 10rpx;" :src="item.image_text" mode=""></image>
						<view class="" style="padding: 10rpx 10rpx;">
							<view class="ershil xiaohei yhxk">{{item.name}}</view>
							<view class="flexbetween">
								<view class="titletext xiaohong fonweight margin_top1">￥
									<text
										class="sanshier xiaohong fonweight">{{Number(item.curr_price).toFixed(0)}}</text>
								</view>
								<view class="flexleft margin_top1">
									<view class="xiaohui ershil">已竞拍</view>
									<view class="ershil xiaohong">{{item.outprice_num}}</view>
									<view class="xiaohui ershil">次</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				// #ifdef H5
				menutop: 80,
				// #endif
				// #ifdef MP-WEIXIN
				menutop: 0,
				// #endif
				isActive: 1,
				navList: [{
					index: 1,
					title: '正在进行'
				}, {
					index: 2,
					title: "即将举行"
				}, {
					index: 3,
					title: "拍卖结果"
				}],
				text1: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				otherinvite_code: "",
				is_login: false,
				userInfo: {},
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '速鉴奢拍 为二奢同行交易赋能',
				imageUrl: '',
				path: '/pages/homepage?code=' + uni.getStorageSync("invite_code")
			}
		},
		onLoad(options) {
			if(options.code){
				uni.setStorageSync("otherinvite_code", options.code)
			}
			// #ifdef H5
			uni.setStorageSync("token", "8564af1e-0c58-40b5-b628-ad49074c34d9")
			uni.setStorageSync("user_id", "1")
			// #endif
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			// #ifdef MP-WEIXIN
			let _this = this
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
				_this.otherinvite_code = options.code ? options.code : (theRequest.code ? theRequest.code :
					0);
				if (_this.otherinvite_code) {
					uni.setStorageSync("otherinvite_code", this.otherinvite_code)
				}
			}
			// #endif
			this.getgonggao()

		},
		onShow() {
			this.init()
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.getinfo()
			} else {
				this.userInfo = null
			}
		},
		methods: {
			getinfo() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} else {
						this.userInfo = null
					}
				})
			},
			jumper(url) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			renzheng(){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				if(this.userInfo.smrz==null || this.userInfo.smrz.status==0){
					this.jumper('/pages_mypage/renzhengxx')
					return false
				}
				this.jumper('/pages_mypage/shenhejg')
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goodscl/goodsIndex', 'GET', {
					page: page || 1,
					limit: 12,
					tab: this.isActive
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getgonggao() {
				httpRequest.request('/api/index/noticeIndex', 'GET', {
					page: 1,
					limit: 12,
				}, false, false, true).then(res => {
					this.text1 = res.data.data
				})
			},
			// 跳转商品详情
			tzspxq(id) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages_homepage/shangpxq?id=' + id
				})
			},
			checked(index) {
				this.isActive = index
				this.page = 1
				this.list = {
					data: []
				}
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-sticky {
		// #ifdef H5
		top: 0 !important;
		// #endif
	}

	/deep/.u-count-down__text {
		color: #fff !important;
		font-size: 24rpx !important;
		line-height: 20rpx !important;
	}

	.dqwushi {
		width: 48%;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.djbox {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		color: #FFFFFF;
		z-index: 10;
		text-stroke: 1px #FFFFFF;
		padding: 8rpx 15rpx;
		background: linear-gradient(90deg, #C4A25D 0%, #AE842F 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.djbox2 {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		color: #FFFFFF;
		z-index: 10;
		text-stroke: 1px #FFFFFF;
		padding: 8rpx 15rpx;
		background-color: #999897;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tab_nav {
		border-bottom: 1rpx solid #D8D8D8;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding-bottom: 11rpx;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.active {
		font-size: 28rpx;
		color: #BA9549;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 230rpx;
		height: 4rpx;
		background: #BA9549;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		background-size: 100% 100%;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}

	.line {
		width: 1rpx;
		height: 26rpx;
		background: #D8D1C4;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
	}

	.dingbu {
		padding: 0 30rpx 30rpx;
		background-color: #fff;
	}
</style>